import React, {FC, useState} from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import QuestionCard from "./QuestionCard";
import {produce} from "immer";
const List1: FC = () => {
   console.log("OOOO")
  //实现新增问卷
    const [questionList,setQuestionList] = useState(
        [    { id: "q1", title: "问卷一", isPublished: false },
            { id: "q2", title: "问卷二", isPublished: false },
            { id: "q3", title: "问卷三", isPublished: true },
            // { id: "q4", title: "问卷四", isPublished: false },
            // { id: "q5", title: "问卷五", isPublished: true },
            // { id: "q6", title: "问卷六", isPublished: false },
        ]
    );
    const [num,addNum] = useState(6);
    function addQuestion() {
        const newId = num +1;
        addNum(newId);
        setQuestionList(
            produce(
                draft => {
                    draft.push( { id: "q" + newId, title: "问卷" +newId, isPublished: false })
                }
            )
        )
    }
    function del(id :string) {
        //打印输出
        // console.log(id+"???")
        // console.log(questionList.forEach((q)=>{
        //     console.log(q.id+"ppppp");
        // }))

        //      setQuestionList(
        //          questionList.filter(
        //              q =>{
        //                  if (q.id !== id ){
        //                      return true;
        //                  }else {
        //                      return false;
        //                  }
        //              }
        //          )
        //      )
        setQuestionList(
            produce(
                draft => {
                    const findIndex = draft.findIndex(t =>t.id === id);
                    draft.splice(findIndex,1);
                }
            )
        )

    }
    function edit(id:string){

    }
    function publishQuestion(id:string) {
       // console.log("111"+id);
        setQuestionList(
            // questionList.map(
            //     (q)=>{
            //      if (q.id !== id){
            //          return q;
            //      }
            //      return {
            //          ...q,
            //          isPublished: true
            //      }
            //     }

            produce(
                draft => {
                    const find = draft.find(tiem =>tiem.id === id);
                    if(find) {
                        find.isPublished = true;
                    }
                }
            )
        )
    }



  return (
    <div>
      <h1>问卷调查列表</h1>
      <div>
        {questionList.map((ques) => {
          const { id, title, isPublished } = ques;
          return (
            <QuestionCard
              key={id}
              id={id}
              title={title}
              isPublished={isPublished}
              deleteQuestion={del}
              editQuestion={edit}
              publishQuestion={publishQuestion}
            ></QuestionCard>
          );
        })}
      </div>
        <div>
            <button onClick={addQuestion}>添加问卷</button>
        </div>
    </div>
  );
};

export default List1;
